<script setup lang="ts">
import {
  LeftOutlined,
  InfoCircleOutlined,
  UserOutlined,
  MailOutlined,
  QqOutlined,
  GoogleOutlined,
  WechatOutlined,
  GithubOutlined
} from "@ant-design/icons-vue"
import {router} from "@/router";
import {computed} from "vue";
import {PagePath} from "@/util/commonUtil";
import _ from "lodash";
import {message} from "ant-design-vue";
import {useAppConfigStore} from "@/store/system/appConfigStore";

defineProps({
  userInfo: {
    type: Object,
    default: () => ({})
  },
  copyright: {
    type: String,
    default: ''
  },
  subjectItemList: {
    type: Array<any>,
    default: () => []
  },
  preArticle: {
    type: Object,
    default: () => ({})
  }
});

const qqNumber = computed(() => useAppConfigStore().qqNumber)
const github = computed(() => useAppConfigStore().github)
const gitee = computed(() => useAppConfigStore().gitee)
const email = computed(() => useAppConfigStore().email)
const weChat = computed(() => useAppConfigStore().weChat)

function clickPreArticle(item: any) {
  if (_.isUndefined(item) || _.isNull(item)) {
    message.warning('暂无上一篇文章')
    return
  }
  let routeData = router.resolve({
    path: PagePath.PostInfoPath + item,
  })
  window.open(routeData.href)
}

function getUserCenter(item: any) {
  if (_.isUndefined(item) || _.isNull(item)) {
    return
  }
  let routeData = router.resolve({
    path: PagePath.UserCenterPath,
    query: {userUid: item}
  })
  window.open(routeData.href, '_blank')
}

function goToOutSide(item: any) {
  window.open(item, '_blank')
}
</script>

<template>
  <div class="aside-author flex flex-wrap overflow-hidden">
    <!-- 作者信息 -->
    <div class="author relative flex flex-col justify-between p-[1em] gap-[1em]">
      <div class="info flex items-center gap-[1em]">
        <img class="avatar w-[4.5em] h-[4.5em] object-cover object-top" :src="userInfo.photoUrl"
             :alt="userInfo.nickName" v-lazy="userInfo.photoUrl">
        <div>
          <h6 class="nickName">我是{{ userInfo.nickName }}</h6>
          本文的作者
        </div>
      </div>
      <div class="leading-6">{{ userInfo.summary }}</div>
      <nav class="flex flex-wrap items-center z-1 leading-[1] gap-[0.5em]">
        <span class="authorBottom flex p-[1em] gap-[0.5em] cursor-pointer text-orange-500"
              @click="getUserCenter(userInfo.uid)">
          <UserOutlined/>
        </span>
        <span class="authorBottom flex p-[1em] gap-[0.5em] cursor-pointer text-indigo-500"
              @click="goToOutSide('mailto:'+email)"
              v-if="email">
          <MailOutlined/>
        </span>
        <span class="authorBottom flex p-[1em] gap-[0.5em] cursor-pointer text-blue-500"
              @click="goToOutSide('//tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin='+qqNumber)"
              v-if="qqNumber">
          <QqOutlined/>
        </span>
        <span class="authorBottom flex p-[1em] gap-[0.5em] cursor-pointer text-red-500"
              @click="goToOutSide(gitee)"
              v-if="gitee">
          <GoogleOutlined/>
        </span>
        <span class="authorBottom flex p-[1em] gap-[0.5em] cursor-pointer text-gray-500"
              @click="goToOutSide(github)"
              v-if="github">
          <GithubOutlined/>
        </span>
        <span class="authorBottom flex p-[1em] gap-[0.5em] cursor-pointer text-green-500" v-if="weChat">
          <WechatOutlined/>
        </span>
      </nav>
    </div>
    <!-- 文章统计 -->
    <div class="article relative flex flex-col justify-between p-[1em] gap-[1em]">
      <img class="absolute m-auto w-24 h-24 copyright text-[8em] leading-[1]" src="@/assets/post/copyright.svg"
           alt="copyright">
      <h6>附加信息</h6>
      <ul class="list-none">
        <li class="leading-6">{{ copyright }}</li>
        <li class="leading-6">若涉及转载第三方内容，还需一同注明。</li>
      </ul>
      <nav class="flex flex-wrap items-center z-1 leading-[1] gap-[0.5em]">
        <div class="prevPost flex p-[1em] gap-[0.5em] cursor-pointer hover:text-rose-500"
             @click="clickPreArticle(preArticle.oid)"
             v-if="preArticle.oid">
          <LeftOutlined/>
          <span>上一篇</span>
          <span class="line-clamp-1">{{ preArticle.title }}</span>
        </div>
        <div class="prevPost flex p-[1em] gap-[0.5em] cursor-pointer"
             @click="clickPreArticle(preArticle.oid)"
             v-else>
          <InfoCircleOutlined/>
          <span>上一篇</span>
          <span class="line-clamp-1">暂无上一篇文章</span>
        </div>
      </nav>
    </div>
  </div>
</template>

<style scoped lang="less">
.aside-author {
  gap: var(--gap-span);
  font-size: var(--font-size-small);
}

.aside-author :where(.article, .author) {
  flex: 1 0 min(22.5rem, 100%);
  background: var(--bg);
  border-radius: var(--radius);
}

.avatar {
  border-radius: 50%;
}

.aside-author .avatar {
  color: hsl(var(--main-color) / .3);
  outline: thin solid;
  outline-offset: .5em;
  background: hsl(var(--main-color) / .1);
}

.aside-author h6 {
  font: var(--font-weight-title) calc(var(--font-size-normal)* var(--font-cale, 1)) / 1.5 var(--font-family-title);
  letter-spacing: var(--font-spacing);
}

.aside-author .article {
  flex-grow: 8;
  overflow: hidden;
}

.aside-author .article .copyright {
  inset: -.2em -.2em auto auto;
  text-shadow: none;
}

.aside-author nav {
  font-size: var(--font-size-small);
  color: hsl(var(--font-color) / .6);
  margin: auto -.5em -.5em;
}

.aside-author .article li:not(:only-child) {
  list-style: disc outside;
  margin-left: 1.75em;
}

.authorBottom {
  background: var(--bg);
  border-radius: 50%;
}

.aside-author .article nav .prevPost {
  flex: 50%;
  border-radius: 2em;
  background: var(--bg);
}
@media (max-width: 1024px) {
  .aside-author {
    padding-inline: var(--edge-lr);
  }
}
</style>
